<div class="upload-container">
    <h2>上传Excel文件</h2>

    <% if (error) { %>
        <div class="error">
            <%= error %>
        </div>
        <% } %>

            <% if (success) { %>
                <div class="success">
                    <%= success %>
                </div>
                <% } %>

                    <form action="/upload" method="POST" enctype="multipart/form-data" class="upload-form">
                        <div class="form-group">
                            <label>数据类型:</label>
                            <div class="data-type-selector">
                                <label class="radio-label">
                                    <input type="radio" name="dataType" value="journals" <%=typeof
                                        defaultDataType==='undefined' || defaultDataType==='journals' ? 'checked' : ''
                                        %>> 期刊数据
                                </label>
                                <label class="radio-label">
                                    <input type="radio" name="dataType" value="books" <%=typeof defaultDataType
                                        !=='undefined' && defaultDataType==='books' ? 'checked' : '' %>> 图书数据
                                </label>
                                <label class="radio-label">
                                    <input type="radio" name="dataType" value="search" <%=typeof defaultDataType
                                        !=='undefined' && defaultDataType==='search' ? 'checked' : '' %>> 搜索数据
                                </label>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="file">选择Excel文件:</label>
                            <input type="file" id="file" name="file" accept=".xlsx,.xls" required>
                        </div>

                        <div class="form-info">
                            <p>支持的格式: .xlsx, .xls</p>
                            <p class="journals-note" <%=typeof defaultDataType !=='undefined' &&
                                defaultDataType==='books' ? 'style="display:none;"' : '' %>>注意:
                                上传期刊数据将替换现有的journals.xlsx文件。
                            </p>
                            <p class="books-note" <%=typeof defaultDataType==='undefined' || defaultDataType !=='books'
                                ? 'style="display:none;"' : '' %>>注意: 上传图书数据将替换现有的books.xlsx文件。</p>
                        </div>

                        <button type="submit" class="upload-btn">上传文件</button>
                    </form>

                    <div class="back-link">
                        <a href="/" class="btn">返回首页</a>
                        <a href="/books" class="btn">图书列表</a>
                        <a href="/journals" class="btn">期刊列表</a>
                        <a href="/upload-images" class="btn">图片上传</a>
                    </div>
</div>

<style>
    .data-type-selector {
        display: flex;
        gap: 20px;
        margin-bottom: 10px;
    }

    .radio-label {
        display: flex;
        align-items: center;
        cursor: pointer;
    }

    .radio-label input {
        margin-right: 5px;
    }

    .upload-container h2 {
        margin-bottom: 20px;
        color: #2c3e50;
    }

    .back-link {
        display: flex;
        gap: 10px;
        margin-top: 20px;
    }
</style>

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const dataTypeRadios = document.querySelectorAll('input[name="dataType"]');
        const journalsNote = document.querySelector('.journals-note');
        const booksNote = document.querySelector('.books-note');

        dataTypeRadios.forEach(radio => {
            radio.addEventListener('change', function () {
                if (this.value === 'journals') {
                    journalsNote.style.display = 'block';
                    booksNote.style.display = 'none';
                } else if (this.value === 'books') {
                    journalsNote.style.display = 'none';
                    booksNote.style.display = 'block';
                }
            });
        });
    });
</script>
